<template>
	<view class="view-page flex flex-direction" :class="{ open: isOpen }" :style="skin">
		<loading :isShow="pageLoadingShow" size="lg"></loading>
		<block v-if="!pageLoadingShow">
			<template v-if="isOpen">
				<view class="top-wrap">
					<image :src="activeInfo.img_url" mode="widthFix"></image>
					<zx-nav noTitle noHoldHeight>
						<view slot="center" class="u-text-center" style="padding-left: 68px;position: relative;">
							{{ activeInfo.main_title }}
							<view class="cart" @tap="navTo('/pages/car/car', 'switchTab')">
								<u-badge max="99" :value="cartNum"></u-badge>
								<image :src="`${assetsPath}/cart.png`" mode="widthFix"></image>
							</view>
						</view>
					</zx-nav>
				</view>
				<view class="main u-flex-1">
					<mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false" ref="mescrollRef">
						<view class="activeinfo">
							<view class="title">{{ activeInfo.main_title }}</view>
							<view>{{ activeInfo.sub_title }}</view>
							<view class="box imglist">
								<view class="cu-list grid col-3 no-border">
									<view class="cu-item" v-for="(img, index) in activeInfo.img_urls" :key="index">
										<view class="imgbox" @click="previewImage(index, activeInfo.img_urls)">
											<image :src="img + '?imageView2/0/w/240'" mode="aspectFill"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 数据列表 -->
						<view class="list">
							<pro-item
								v-for="(items, indexs) in prolist"
								:key="indexs"
								:index="indexs"
								:proinfo="items"
								direction="row"
								:width="proWidth"
								@changeNum="info => changeInfo(info, indexs)"
							></pro-item>
						</view>
					</mescroll-uni>
				</view>
			</template>
			<mescroll-empty :option="option" @emptyclick="emptyClick" v-if="!isOpen"></mescroll-empty>
		</block>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import MescrollEmpty from '@/uni_modules/mescroll-uni/components/mescroll-empty/mescroll-empty.vue';
import proItem from '@/components/pro-item.vue';
import loading from '@/components/loading';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			isOpen: false,
			activeInfo: {},
			prolist: [],
			avg_price: '',
			sales_by: '',
			proWidth: uni.upx2px(200) + 'px',
			option: { tip: '该活动还没有开始', btnText: '返回首页' },
			pageLoadingShow: true
		};
	},
	mixins: [MescrollMixin],
	components: {
		proItem,
		MescrollEmpty,
		loading
	},
	computed: {
		...mapState(['memberId', 'cartNum'])
	},
	onShareAppMessage(res) {
		let shareUrl = '/active/active/active5';
		if (this.memberId) {
			shareUrl += '?recommenderId=' + this.memberId;
		}
		return {
			title: this.activeInfo.main_title || this.appName,
			path: shareUrl
		};
	},
	onShareTimeline() {
		let shareUrl = '/active/active/active5';
		if (this.memberId) {
			shareUrl += '?recommenderId=' + this.memberId;
		}
		return {
			title: this.activeInfo.main_title || this.appName,
			path: shareUrl
		};
	},
	created() {
		this.getActiveInfo();
	},
	methods: {
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		upCallback() {
			this.getProductList();
		},
		getProductList() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize,
				active_id: 1
			};
			let $me = this;
			this.$postAction(this.$api.getProductList, param).then(da => {
				if (da.data && da.data.length > 0) {
					let curPageData = da.data;
					this.mescroll.endBySize(curPageData.length, da.count);
					if (this.mescroll.num == 1) this.prolist = []; //如果是第一页需手动制空列表
					this.prolist = this.prolist.concat(curPageData); //追加新数据
				} else {
					this.prolist = [];
					this.mescroll.endSuccess(0, false);
				}
			});
		},
		getActiveInfo() {
			this.$getAction(this.$api.getActiveInfo + '1')
				.then(da => {
					if (da.code == 0) {
						this.isOpen = da.data.active == 1;
						this.activeInfo = da.data;
					}
				})
				.finally(() => {
					this.pageLoadingShow = false;
				});
		},
		emptyClick() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		previewImage: function(index, imglist) {
			uni.previewImage({
				current: imglist[index],
				loop: true,
				urls: imglist
			});
		},
		changeInfo(info, index) {
			this.$set(this.prolist, index, info);
		}
	}
};
</script>

<style lang="scss" scoped>
.view-page {
	padding-top: 20vh;
	background: #fff;
	position: relative;
	height: 100vh;
	overflow: hidden;
	&.open {
		padding-top: 0;
	}
}

.top-wrap {
	// position: fixed;
	position: relative;
	width: 100%;

	// top: 0;
	// left: 0;
	image {
		width: 100%;
	}
	.tab-nav {
		position: absolute;
		top: 350upx;
		background: #fff;
		height: 90upx;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 28upx;
		color: #474747;
		.active {
			color: #ffa423;
		}
		image {
			width: 12upx;
			margin-left: 13upx;
		}
	}
}
.cart {
	position: absolute;
	right: -10px;
	top: 0;
	image {
		display: block;
		width: 46upx;
		height: 43upx;
	}
	::v-deep .u-badge {
		position: absolute;
		right: 0rpx;
		transform: translate(50%, -50%);
		top: 0;
		z-index: 999;
	}
}
.main {
	background: #fff;
	// height: calc(100vh - 555upx);
	// position: absolute;
	// top: 410upx;
	left: 0;
	width: 100%;
	margin: 0;
	overflow: auto;
	min-height: 0;
	.list {
		padding: 0 20upx;
	}
}
.activeinfo {
	color: #48484a;
	font-size: 28upx;
	line-height: 48upx;
	padding: 20upx 28upx;
	.title {
		font-size: 36upx;
		font-weight: 800;
		color: #000;
		margin-bottom: 20upx;
	}
}
.imglist {
	margin: 12upx 0;
	padding: 0;
	.cu-list.grid.no-border {
		padding: 0;
		// border-radius: 20upx;
		overflow: hidden;
	}
	.cu-list.grid.no-border > .cu-item {
		padding-top: 4upx;
		padding-bottom: 0;
		float: left;
		width: 33.333%;
		.imgbox {
			height: 226upx;
			width: 226upx;
			overflow: hidden;
			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
